<template>
  <div class="container" v-swipe="handleSwipe">
    <!-- 播放器 -->
    <div id="J_prismPlayer"></div>

    <Transition name="slide-fade">
      <!-- 直播间顶部信息 -->
      <liveTop v-show="liveUI" />
    </Transition>

    <Transition name="slide-fade">
      <!-- 评论和底部输入框 -->
      <liveBottom v-show="liveUI" @hideUI="hideUI" />
    </Transition>

  </div>
</template>

<script setup>
import Aliplayer from 'aliyun-aliplayer';
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
import liveTop from './liveTop.vue'
import liveBottom from './liveBottom.vue';


//#region播放器实例
const player = ref(null);   // 播放器实例
const source = 'artc://live.qiuxuemao.cn/live/live?auth_key=1742173174-0-0-6b96d2dd71a5b745416427d9525aa912'  // 直播流地址
// 创建播放器实例
// 本地测试只能通过localhost 访问, 127.0.0.1也不行, 远程访问必须打包部署在License证书绑定的域名上
const liveState = ref('直播已结束')
function createPlayer(source, cover) {
  player.value = new Aliplayer({
    id: 'J_prismPlayer',      // 播放器容器id
    width: "100%",            // 播放器宽度
    height: "100%",           // 播放器高度
    source: source, // 拉流地址
    isLive: true,             // 播放内容是否为直播，直播时会禁止用户拖动进度条。默认值为false，播放直播流时需要设置为true。
    license: {
      domain: "qiuxuemao.cn", // 申请 License 时填写的域名
      key: "MPtobXpwKs2LwZ2iM75a73058584a4f0eb8b9548ed8897b51" // 申请成功后，在控制台可以看到 License Key
    },
    cover: '/public/msg/avatar1.jpeg',               // 封面地址  
    autoplay: false,          // 自动播放
    // definition:'FD,LD,SD,HD,OD,2K,4K', // 没看到在哪控制
    snapshotWatermark: '小兵良品', // 截图水印
    diagnosisButtonVisible: 'true', // 检测按钮
    controlBarVisibility: 'never', // 隐藏控制面板
    skinLayout: [
      { name: "bigPlayButton", align: "tlabs", x: 0, y: 240 },   // 大播放按钮。
      { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },    // 错误提示，当视频播放出错时的提示信息。
    ]
  },)
  // 当RTS拉流成功时触发，通过订阅该事件，可以获取到RTS TraceId。 回调函数的参数中traceId为拉流的TraceId，source为当前RTS流的播放地址。
  player.value.on('rtsTraceId', function (event) {
    console.log('拉流成功', event.paramData);
  })
  // 当RTS降级时触发，参数reason为降级的原因，fallbackUrl为降级到的地址。
  player.value.on('rtsFallback', function (event) {
    console.log('当RTS降级时触发', event.paramData);
  })
  // 播放出错时
  player.value.on('onM3u8Retry', function () {
    console.log('主播暂时离开，请稍后......');
  });
  //  尝试数据恢复失败时
  player.value.on('liveStreamStop', function () {
    console.log('直播已结束');
  });
  // 
  player.value.on('error', function (e) {

    // 获取错误信息
    const ErrorMessage = document.querySelector('.prism-ErrorMessage')

    //解析
    if (e.paramData.error_code == 4035) {
      console.log('错误信息:', e.paramData.error_msg);
    } else if (e.paramData.error_code == 4004) {
      console.log('直播已关闭', e.paramData.error_msg);
    } else {
      console.log(e.paramData);
    }

    // 隐藏内部所有div结构
    ErrorMessage.querySelectorAll('div').forEach(div => div.style.display = 'none')
    // 给最外层添加背景图片
    ErrorMessage.style.background = `url('/public/msg/avatar1.jpeg') center center / cover`
    // 添加div结构
    const div = document.createElement('div');
    div.innerHTML = `
      <div style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        background: rgba(0, 0, 0, 0.3);
      ">
        <div id="liveState" style="
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          font-size: 18px;
          font-weight: 700;
          padding:10px 15px;
          border-radius: 100px;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          border: 1px solid #ccc;
        "> 
          ${e.paramData.error_msg} 
        </div>
      </div>
    `
    // div添加到ErrorMessage结构里
    ErrorMessage.appendChild(div);
    // 监听点击事件
    document.querySelector('#liveState').addEventListener('click', liveStateClick);

  });
}

function liveStateClick() {
  console.log('直播状态被点击');
}

//#endregion


//#region 直播页面UI
const liveUI = ref(true)
function hideUI() {
  liveUI.value = false
}
function handleSwipe(detail) {
  if (detail.direction === 'left') {
    liveUI.value = true
  } else {
    liveUI.value = false
  }
}
//#endregion


onMounted(() => {
  // 挂载的时候创建播放器实例, 传入播放源以及封面广告
  createPlayer(source);
})

</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#J_prismPlayer {
  width: 100%;
  height: 100vh;
}

// 播放按钮
:deep(.prism-big-play-btn) {
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-leave-active {
  transition: all 0.5s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(200px);
  opacity: 0;
}
</style>